<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Card, message, Switch } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExampleTableApi } from '#/api';
import { $t } from '#/locales';

const params = ref({
  Is50Clear: true,
  IsAutoPrint: true,
});
// 表单初始化
const [QueryForm] = useVbenForm({
  actionButtonsReverse: true,
  // 默认展开
  collapsed: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 10,
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入单号',
      },
      // 字段名
      fieldName: 'OrderNum',
    },
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入客户名称',
      },
      // 字段名
      fieldName: 'CustomerName',
    },
  ],
  // 是否可展开
  showCollapseButton: false,
  // submitOnChange: true,
  submitButtonOptions: {
    content: '查询',
  },
  submitOnEnter: true,
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
});

// 表格初始化
interface RowType {
  back: string;
  createDate: string;
  CustomerName: string;
  mName: string;
  mNo: string;
  Name: string;
  No: string;
  ResSalesperson: string;
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'OrderNum', sortable: true, title: '单号' },
    { field: 'createDate', formatter: 'formatDateTime', title: '查询时间' },
    { field: 'CustomerName', title: '客户名' },
    { field: 'ResSalesperson', title: '分管业务员' },
    { field: 'No', sortable: true, title: '使用网点编码' },
    { field: 'Name', title: '使用网点名' },
    { field: 'mNo', sortable: true, title: '主客户编码' },
    { field: 'mName', title: '主客户名' },
    { field: 'back', title: '备注' },
  ],
  editConfig: {
    mode: 'row',
    trigger: 'click',
  },
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getExampleTableApi({
          page: page.currentPage,
          pageSize: page.pageSize,
        });
      },
    },
  },
  showOverflow: true,
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

// 按钮控制区域
// 表单提交
function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}

// 是否可编辑
function hasEditStatus(row: RowType) {
  return gridApi.grid?.isEditByRow(row);
}

// 编辑行
function editRowEvent(row: RowType) {
  gridApi.grid?.setEditRow(row);
}

const cancelRowEvent = (_row: RowType) => {
  gridApi.grid?.clearEdit();
};

function AutoPrint() {
  params.value.IsAutoPrint = !params.value.IsAutoPrint;
}

function exportEvent() {}
</script>

<template>
  <Page auto-content-height>
    <Card class="mb-5 flex-wrap" title="">
      <div class="flex">
        <QueryForm />
        <div class="ml-2 flex">
          <Button class="mr-2" type="primary" @click="exportEvent()">
            导出当前页
          </Button>
          <Button
            v-if="params.IsAutoPrint === true"
            class="mr-2"
            type="primary"
            @click="AutoPrint()"
          >
            自动打印开
          </Button>
          <Button v-else class="mr-2" @click="AutoPrint()"> 自动打印关 </Button>
          <Switch
            v-model:checked="params.Is50Clear"
            :checked-children="$t('examples.captcha.show')"
            :un-checked-children="$t('examples.captcha.hide')"
            class="ml-8 w-5"
          />
          <p>50条清空页面(建议打开，减少卡顿)</p>
        </div>
      </div>

      <Button
        class="mr-2"
        style="background: green"
        @click="handleClick('updateSchema')"
      >
        配置
      </Button>
    </Card>

    <Grid>
      <template #action="{ row }">
        <template v-if="hasEditStatus(row)">
          <Button type="link" @click="saveRowEvent(row)">保存</Button>
          &nbsp;
          <Button type="link" @click="cancelRowEvent(row)">取消</Button>
        </template>
        <template v-else>
          <Button type="link" @click="editRowEvent(row)">编辑</Button>
        </template>
      </template>
    </Grid>
  </Page>
</template>
